/* 引入的样式 */
@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';

.main{
    width: 100%;
    height: auto;
    line-height: 30px;
    font-size: 14px;
    margin-bottom: 40px;
    &-box{
        width: 1283px;
        margin: 0 auto;
        height: auto;
        
        padding-bottom: 40px;
        &-title{
            margin: 20px 0 40px 0;
            height: 27px;
            width: 100%;
            line-height: 27px;
            font-size: 14px;
            & a{
                color: #828282;
                margin-right: -6px;
            }
        }
        &-showshop{
            width: 1283px;
            margin: 0 auto;
            background-color: #fff;
            height: auto;
            overflow: hidden;
            margin-bottom: 20px;
            &-wrap{
                padding: 30px 0 35px;
                width: 1283px;
                min-height: 540px;
                height: auto;
                // 放大镜效果的整个框
                position: relative;
                &-showzoom{
                    margin: 0 40px 0 30px;
                    width: 460px;
                    height: 460px;
                    float: left;
                    border: 1px solid #f2f2f2;
                    position: relative;
                    // 那个新品 可变的标识
                    & .smallbox{
                        width: 230px;
                        height: 230px;
                        background-color: blanchedalmond;
                        opacity: .5;
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: none;
                    }
                    & .zoom-mark{
                        position: absolute;
                        top: -1px;
                        right: 20px;
                        z-index: 1;
                        padding: 0 10px 7px;
                        width: 28px;
                        height: 40px;
                        background: url('/imgs/ico-comm.png') no-repeat;
                        background-position: -279px -85px;
                        font-size: 14px;
                        color: #333;
                        text-align: center;
                        
                    }
                    &>img{
                        width: 100%;
                        height: 100%;
                        
                    }
                    & ul{
                        margin-top: 20px;
                        width: 460px;
                        height: 100px;
                        & li{
                            cursor: pointer;
                            float: left;
                            width: 78px;
                            height: 74px;
                            margin-right: 10px;
                            display: flex;
                            align-content: center;
                            justify-content: center;
                            // border: 1px solid #f2f2f2;
                            & img{
                                width: 74px;
                                height: 70px;
                                overflow: hidden;
                            }

                        }
                        
                    }
                }
                & .zoombox{
                    width: 460px;
                    height: 460px;
                    background-color: black;
                    position: absolute;
                    left: 500px;
                    overflow: hidden;
                     display: none;
                    & img{
                        width: 1840px;
                        height: 1840px;
                    }
                }
                // 放大镜右边的描述信息
                &-decinfo{
                    width: 720px;
                    height: 510px;
                    float: right;
                    margin-right: 30px;
                    line-height: 30px;
                    margin-bottom: 100px;
                    & h3{
                        font-size: 26px;
                        color: #333333;
                        margin-bottom: 14px;

                    }
                    & .dec-tips{
                        font-size: 12px;
                        color: #aaaaaa;
                        line-height: 30px;
                        
                    }
                    & .dec-showprice{
                        font-size: 30px;
                        color:#f74f4a;
                        line-height: 60px;
                        padding: 20px 0 15px;
                    }
                    & .dec-saleinfo{
                        margin: 10px 0 15px;
                        width: 100%;
                        height: 16px;
                        margin-bottom: 20px;
                        font-size: 14px;
                        color: #cc6600;
                        line-height: 32px;
                        & i{
                            margin-top: -2px;
                            width: 17px;
                            height: 17px;
                            background-position: -44px -2px;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        & span{
                            display: inline-block;
                            height: 16px;
                            background: #feeeee;
                            border-radius: 2px;
                            border: 1px solid #fa585a;
                            font-size: 12px;
                            text-align: center;
                            line-height: 17px;
                            margin-bottom: 4px;
                            margin-left: 4px;
                            vertical-align: middle;
                        }
                    }
                    & .dec-pj{
                        width: 100%;
                        height: 100px;
                        line-height: 100px;
                        border-top: 1px dashed #eee;
                        border-bottom: 1px dashed #eee;
                        font-size: 14px;
                        & .dec-sold{
                            width: 310px;
                            color: #999;
                        }
                        & .dec-sumpj{
                            width: 200px;
                            color: #999;
                            & span{
                                color:black;
                            }
                        }
                        & .dec-starbox{
                            font-size: 20px;
                            color: #ffd92c;
                            float: right;
                            & i{
                                background-position: 0 -104px;
                                margin: -4px 6px 0 0;
                                display: inline-block;
                                vertical-align: middle;
                                width: 111px;
                                height: 18px;
                            }
                        }
                    }
                    & #dec-size{
                        width: 100%;
                        height: 92px;
                        font-size: 14px;
                        margin-top: 10px;
                        & span{
                            color: #888;
                            padding-top: 5px;
                        }
                        & ul{
                            width: 660px;
                            margin-left: 63px;
                            overflow: hidden;
                            margin-top: -30px;
                            & li{
                                float: left;
                                margin: 0 0 10px 9px;
                                border: 1px solid #ddd;
                                color: #333;
                                text-align: center;
                                line-height: 14px;
                                cursor: pointer;
                                overflow: hidden;
                                & span{
                                    padding: 8px 18px;
                                    
                                    display: inline-block;
                                }
                            }
                        }
                    }
                    & .dec-num{
                        padding-top: 10px;
                        width: auto;
                        height: auto;
                        margin: 20px 0;
                        &-box{
                            
                            & input{
                                width: 58px;
                                height: 32px;
                                border: 1px solid #ddd;
                                border-left: none;
                                border-right: none;
                                text-align: center;
                                line-height: 34px;
                                color: #333;
                                display: block;
                                font-size: 14px;
                                cursor: default;
                                float: left;
                                outline: none;
                            }
                            & span{
                                width: 34px;
                                height: 34px;
                                text-align: center;
                                cursor: pointer;
                                float: left;
                                border: 1px solid #ddd;
                            }
                        }
                        & .dec-stock{
                            font-size: 14px;
                            color: #5e6360;
                            padding-left: 10px;
                            line-height: 34px;
                        }
                    }
                    & .dec-btn{
                        margin-top: 78px;
                        div{
                            background: #f7545f;
                            display: block;
                            width: 200px;
                            height: 56px;
                            line-height: 56px;
                            text-align: center;
                            font-size: 20px;
                            color: #fff;
                            cursor: pointer;
                        }
                        a{
                            background: #f7545f;
                            display: block;
                            width: 200px;
                            height: 56px;
                            line-height: 56px;
                            text-align: center;
                            font-size: 20px;
                            color: #fff;
                            cursor: pointer;
                        }
                    }
                }
                & .descContentList{
                    height: auto;
                    float: left;
                    width: 790px;
                    margin: 0 auto;
                    text-align: center;
                    & img{
                        display: block;
                        width: 100%;
                    }
                }
            }
            
        }
        
        // 商品细节
        & .product-detail{
            width: 1283px;
            margin: 0 auto;
            overflow: hidden;
            background: #fff;
            &-top{
                margin: 0 auto 20px;
                width: 1220px;
                height: 71px;
                border-bottom: 1px solid #eee;
                & ul{
                    margin: 0 auto;
                    width: 705px;
                    & li{
                        float: left;
                        width: 235px;
                        height: 71px;
                        line-height: 71px;
                        text-align: center;
                        color: #333;
                        font-size: 18px;
                        cursor: pointer;
                        & a{
                            color: black;
                            position: relative;
                        }
                        
                    }
                }
               
            }
            &-bottom-1{
                &-parameter{
                    font-size: 14px;
                    color: #777;
                    margin-left: 44px;
                    height: 40px;
                    line-height: 20px;
                    margin-bottom: 5px;
                    & li{
                        float: left;
                        width: 300px;
                        margin-bottom: 6px;
                    }
                }
                & .bigimg{
                    height: auto;
                    text-align: center;
                    padding-bottom: 100px;
                    margin-top: 40px;
                }
            }
        }
    }
    
}

// 放大镜那里的默认边框效果
.zoomborder{
    border: 2px solid #f7545f;
    
}

.fleft{
    float: left;
}
//商品展示 描述所用精灵图
.ico-dec{
    background: url('/imgs/ico-detail.png') no-repeat;
}

//点击选择门派后的边框  暂时还没加
.size-border{
    border: 2px solid #f7545f;
}

//分页栏的b的样式
.b-border{
    width: 40px;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -20px;
    display: block;
    background: #f7545f;
    top: 44px;
}

//
.fly{
    width: 20px;
    height: 20px;
    background-color: #f7545f;
    border-radius:50%;
}